<template>
       <!--顶部导航栏 start-->
  <ExamMenu />
  <!--顶部导航栏 end-->
    <div class="about-container">
      <!-- 标题部分 -->
      <transition name="title-slide">
        <h1 class="main-title">
          <el-icon><Star /></el-icon>
          关于我们
        </h1>
      </transition>
  
      <!-- 主要内容 -->
      <div class="content-wrapper">
        <!-- 公司简介 -->
        <transition name="card-slide">
          <el-card class="intro-card">
            <div class="intro-content">
              <div class="text-section">
                <h2>技术驱动教育创新</h2>
                <div class="divider"></div>
                <p class="highlight-text">
                  我们成立于2018年，专注于在线教育技术的研发与创新，累计服务超过500万考生
                </p>
                <p class="desc-text">
                  通过AI监考、智能组卷、大数据分析等技术，重新定义教育平台体验。我们的团队由教育专家和工程师组成，致力于打造安全、公平、高效的考试环境。
                </p>
              </div>
              <div class="image-section">
                <div class="glow-border"></div>
                <img src="https://source.unsplash.com/600x400/?office" alt="办公环境" />
              </div>
            </div>
          </el-card>
        </transition>
  
        <!-- 核心价值 -->
        <transition name="card-slide">
          <el-card class="value-card">
            <template #header>
              <div class="card-header">
                <el-icon><Trophy /></el-icon>
                <span>核心价值</span>
              </div>
            </template>
            
            <div class="value-grid">
              <div 
                v-for="(item, index) in coreValues"
                :key="index"
                class="value-item"
              >
                <div class="icon-wrapper">
                  <component :is="item.icon" class="value-icon" />
                </div>
                <h3>{{ item.title }}</h3>
                <p>{{ item.desc }}</p>
              </div>
            </div>
          </el-card>
        </transition>
  
        <!-- 时间轴 -->
        <transition name="card-slide">
          <el-card class="timeline-card">
            <template #header>
              <div class="card-header">
                <el-icon><Clock /></el-icon>
                <span>发展历程</span>
              </div>
            </template>
            
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in milestones"
                :key="index"
                :timestamp="item.time"
                placement="top"
              >
                <div class="timeline-content">
                  <el-tag :type="item.type">{{ item.tag }}</el-tag>
                  <p>{{ item.content }}</p>
                </div>
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </transition>
  
        <!-- 联系方式 -->
        <transition name="card-slide">
          <el-card class="contact-card">
            <template #header>
              <div class="card-header">
                <el-icon><Promotion /></el-icon>
                <span>联系我们</span>
              </div>
            </template>
            
            <div class="contact-grid">
              <div class="contact-item">
                <el-icon><Location /></el-icon>
                <div class="contact-info">
                  <h3>总部地址</h3>
                  <p>北京市海淀区科技大厦18层</p>
                </div>
              </div>
              <div class="contact-item">
                <el-icon><Phone /></el-icon>
                <div class="contact-info">
                  <h3>联系电话</h3>
                  <p>010-87654321 / 400-800-1234</p>
                </div>
              </div>
              <div class="contact-item">
                <el-icon><Message /></el-icon>
                <div class="contact-info">
                  <h3>电子邮箱</h3>
                  <p>contact@edutech.com</p>
                </div>
              </div>
            </div>
          </el-card>
        </transition>
      </div>
    </div>
     <!--底部 start-->
  <ExamFooter />
  <!--底部 end-->
  </template>
  
  <script setup lang="ts" >
  import { ref } from 'vue'
  import {
    Star,
    Trophy,
    Clock,
    Promotion,
    Location,
    Phone,
    Message,
    Lock,
    User,
    DataAnalysis,
    Cloudy
  } from '@element-plus/icons-vue'
  import ExamFooter from '@/components/comm/ExamFooter.vue';
  import ExamMenu from '@/components/comm/ExamMenu.vue';
  const coreValues = ref([
    {
      icon: Lock,
      title: '安全可信',
      desc: '采用银行级加密技术，保障考试数据安全'
    },
    {
      icon: User,
      title: '以人为本',
      desc: '考生体验优先的设计理念'
    },
    {
      icon: DataAnalysis,
      title: '智能分析',
      desc: '多维度的考试数据分析报告'
    },
    {
      icon: Cloudy,
      title: '稳定高效',
      desc: '99.99%系统可用性保障'
    }
  ])
  
  const milestones = ref([
    {
      time: '2018 Q3',
      tag: '诞生',
      type: 'success',
      content: '公司正式成立，推出第一代教育平台系统'
    },
    {
      time: '2019 Q2',
      tag: '突破',
      type: 'warning',
      content: '用户突破10万，获得教育科技创新奖'
    },
    {
      time: '2020 Q1',
      tag: '革新',
      type: 'danger',
      content: '行业首创AI智能监考系统'
    },
    {
      time: '2022 Q4',
      tag: '国际',
      type: 'info',
      content: '服务拓展至海外15个国家'
    }
  ])
  </script>
  
  <style lang="scss" scoped>
  // 主题色定义
  @use '@/assets/scss/variables' as *;
  
  @keyframes gradientGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  .about-container {
    min-height: 100vh;
    padding: 60px 20px;
    background: linear-gradient(135deg, lighten($primary-color, 42%), #f8f9fa);
  
    .main-title {
      text-align: center;
      color: $primary-color;
      margin-bottom: 40px;
      font-size: 2.8em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      text-shadow: 2px 2px 4px rgba($primary-color, 0.1);
  
      .el-icon {
        font-size: 1.3em;
      }
    }
  
    .content-wrapper {
      max-width: 1200px;
      margin: 0 auto;
    }
  
    .intro-card {
      margin-bottom: 40px;
      border-radius: 15px;
      overflow: hidden;
      transition: transform 0.4s;
  
      &:hover {
        transform: translateY(-8px);
      }
  
      .intro-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 30px;
  
        .text-section {
          h2 {
            color: $primary-color;
            font-size: 2.2em;
            margin-bottom: 20px;
          }
  
          .divider {
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, $primary-color, $secondary-color);
            margin: 20px 0;
          }
  
          .highlight-text {
            color: darken($primary-color, 15%);
            font-size: 1.1em;
            line-height: 1.8;
            margin-bottom: 25px;
          }
  
          .desc-text {
            color: #666;
            line-height: 1.8;
            font-size: 0.95em;
          }
        }
  
        .image-section {
          position: relative;
          border-radius: 12px;
          overflow: hidden;
  
          .glow-border {
            position: absolute;
            inset: -5px;
            background: linear-gradient(45deg, $primary-color, $secondary-color);
            z-index: 1;
            animation: gradientGlow 6s ease infinite;
          }
  
          img {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
            z-index: 2;
          }
        }
      }
    }
  
    .value-card {
      margin-bottom: 40px;
      border-radius: 15px;
  
      .card-header {
        font-size: 1.4em;
        color: $primary-color;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 20px;
      }
  
      .value-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
        padding: 20px;
  
        .value-item {
          text-align: center;
          padding: 30px;
          background: rgba($primary-color, 0.03);
          border-radius: 12px;
          transition: all 0.3s;
  
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba($primary-color, 0.1);
          }
  
          .icon-wrapper {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, $primary-color, lighten($primary-color, 20%));
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
  
            .value-icon {
              color: white;
              font-size: 2em;
            }
          }
  
          h3 {
            color: $primary-color;
            margin: 15px 0;
            font-size: 1.3em;
          }
  
          p {
            color: #666;
            line-height: 1.6;
            font-size: 0.95em;
          }
        }
      }
    }
  
    .timeline-card {
      margin-bottom: 40px;
      border-radius: 15px;
  
      :deep(.el-timeline) {
        padding-left: 20px;
  
        .el-timeline-item__timestamp {
          color: $primary-color;
          font-weight: 500;
        }
  
        .el-timeline-item__node {
          background: $primary-color;
          border-color: lighten($primary-color, 20%);
        }
  
        .el-tag {
          margin-bottom: 10px;
        }
      }
  
      .timeline-content {
        background: rgba($primary-color, 0.05);
        padding: 15px;
        border-radius: 8px;
        border-left: 3px solid $primary-color;
      }
    }
  
    .contact-card {
      border-radius: 15px;
  
      .contact-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
        padding: 20px;
  
        .contact-item {
          display: flex;
          align-items: center;
          gap: 20px;
          padding: 25px;
          background: rgba($primary-color, 0.03);
          border-radius: 12px;
          transition: all 0.3s;
  
          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba($primary-color, 0.1);
          }
  
          .el-icon {
            font-size: 2.2em;
            color: $primary-color;
            flex-shrink: 0;
          }
  
          h3 {
            color: $primary-color;
            margin-bottom: 8px;
            font-size: 1.2em;
          }
  
          p {
            color: #666;
            font-size: 0.95em;
          }
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .about-container {
      padding: 40px 15px;
  
      .intro-card .intro-content {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 20px;
      }
  
      .main-title {
        font-size: 2em;
      }
  
      .value-grid {
        grid-template-columns: 1fr !important;
      }
    }
  }
  </style>